/**
 * 通用表单
 * 食用指南
 *
 * <common-form :form-config="formConfig"></common-form>
 *
 * formConfig:
 * {
 *    inputList:[
 *      {
 *        id: String 可选 DOM结点ID
 *        name: String 必选 表单元素name
 *        title: String 可选 左侧信息
 *        desc: String 可选 下方描述
 *        require: Boolean 可选 左侧星号
 *        type: Enum 必选 采用哪种表单组件 参考input文件夹中组件
 *        value: Any 可选 初始值，依照采用的input组件有所不同 **editor组件必选，类型必须为字符串**
 *        extra: Any 可选 同上
 *      },.....
 *    ]
 * }
 *
 * **** WARNING:如需初始值,务必在取到初始值之后再渲染该组件 ****
 */
<template>
  <form class="common-form" action="">
      <table class="form-table">
          <tbody>
              <template  v-for="config in formConfig">
                  <input-item :config="config" :value="config.value" :ref="config.name" @input="onInput"></input-item>
                  <input-desc :desc="config.desc" :validate="validate[config.name]" :has-input="hasInput[config.name]"></input-desc>
              </template>
          </tbody>
      </table>
  </form>
</template>

<script>
import Tools from '../../utils/tools';
import InputItem from './InputItem.vue';
import InputDesc from './InputDesc.vue';

export default {
  name: 'commonForm',
  props: ['formConfig'],
  data() {
    return {
      formData: {},
      validate: {},
      hasInput: {}
    };
  },
  methods: {
    onInput({value, name, twoWay, validate, byUser}) {
      this.formData[name] = value;
      this.validate = Object.assign({},Object.assign(this.validate,{[name]:validate}));

      if (twoWay) {
        this.formConfig.find((input) => input.name == name).value = value;
      }
      // byUser字段用来区分是否用户引起的Update操作
      if(byUser){
        this.hasInput[name]=true
      }
      this.$emit('input', {formData: this.formData, validate: this.validate, byUser, name, value});
    }
  },
  components:{
    "input-item":InputItem,
    "input-desc":InputDesc
  }
};
</script>

<style lang="less">
.common-form {
  .form-table {
    width: 100%;
    border-spacing: 0;
  }
}
</style>